<template>
  <div>
    <div ref="echart" style="width:100%;height:100%;"></div>
  </div>
</template>

<script>
import func from '@/assets/js/func.js'
export default {

  mounted() {
    // 请求返回数据后  不推荐使用vue set变量
    this.$nextTick().then(() => {
      this.init();
    })
  },
  props: ['params'],
  computed: {
    titleData () {
      if (!this.params.carOutPriceRank) return []
      return this.params.carOutPriceRank.map(item => item.priceRemark)
    },
    saleVolume () {
      if (!this.params.carOutPriceRank) return []
      return this.params.carOutPriceRank.map(item => item.storageNum)
    }
  },
  watch: {
    'params.carOutPriceRank' () {
      this.$nextTick().then(() => {
        this.init()
      })
    }
  },
  methods: {
    init () {
      console.log(this.titleData);
      console.log(this.saleVolume);
      var myChart = this.$echarts.init(this.$refs["echart"]);

      // 指定图表的配置项和数据
      var option = {
          // backgroundColor: "#12152b",
          // color: ["#FF604D","#F0BD26","#0EC49E","#088BEB","#60C9FF"],
          textStyle: {
              color: '#fff'
          },
          title: {
              text: '销售车辆价格分析 (单位/辆)',
              textStyle: {
                color: '#00dcde',
                // fontWeight: 'lighter',
                fontSize: 16,
              },
              left: 10,
              top: 0
          },
          tooltip: {},
          grid: {
              left: '3%',
              right: '4%',
              bottom: '6%',
              containLabel: true
          },
          legend: {
              data:['销量']
          },
          xAxis: {
              type:"value",
              splitLine: {
                  // show: false
                lineStyle:{
                    color:'#333',
                }
              },
              
          },
          yAxis: {
            axisTick : {show: false},
            axisLine: {
                show: true,
                lineStyle:{
                    color:'#333',
                }
            },
            type:'category',
            data: this.titleData.reverse()
          },
          series: [{
              // name: '销量',
              type: 'bar',
              data: this.saleVolume.reverse(),
              barWidth: '50%',
              itemStyle:{
                normal:{
                    // barBorderRadius:100,
                    color:function(idx) {
                        console.log(idx)
                        var color = func.allColor(),
                        color = color.reverse();
                        return color[idx.dataIndex % color.length]
                    }
                }  
              },
              label:{
                normal:{
                  show:true,
                  position:'right',
                  formatter: '{c}',
                },

              }
          }]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
     
    }
  }
};
</script>
